<!-- 系统运营数据 -->
<template>
  <div class="systemOperationDaily">
    <div class="title">
      <span>系统运营数据</span>
      <span class="iconfont icon-jiantou"></span>
    </div>

    <div class="block">
      <span class="demonstration">日期:</span>
      <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>

    <div class="content">
      <el-table :data="systemOperationDaily" style="width: 100%" border stripe v-loading="loading">
        <el-table-column prop="id" label="编号" align="center"></el-table-column>
        <el-table-column prop="statDate" label="日期" width="130" align="center">
          <template #default="{ row }">
            {{ formatDate(row.statDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="dau" label="日活跃" align="center"></el-table-column>
        <el-table-column prop="mau" label="月活跃" align="center"></el-table-column>
        <el-table-column prop="newUsers" label="新用户" align="center"></el-table-column>
        <el-table-column prop="activeUsers" label="活跃用户数" align="center"></el-table-column>
      </el-table>

      <el-pagination @current-change="handlePageChange" @size-change="handleSizeChange" :current-page="current"
        :page-size="size" :total="total" layout="total, prev, pager, next, sizes" :page-sizes="[6, 10, 20, 50]">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request';
export default {
  name: 'SystemOperationDaily',
  data() {
    return {
      systemOperationDaily: [],
      current: 1,
      size: 6,
      total: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: ''
    };
    // Define any data you need for this page here
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // Define any methods you need for this page here
    fetchData() {
      const url = '/systemOperationDaily/daily/page'
      const params = {
        current: this.current,
        size: this.size
      }
      axios.get(url, { params }).then(response => {
        if (response.data && response.data.code === 200) {
          this.systemOperationDaily = response.data.data.records
          this.total = response.data.data.total
        }
      }).catch(error => {
        this.$message.error('加载数据失败')
      })
    },
    formatDate(date) {
      if (!date) return '';
      try {
        const dateObj = typeof date === 'string' ? new Date(date) : date;
        const year = dateObj.getFullYear();
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const day = String(dateObj.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } catch (e) {
        return date;
      }
    },
    handlePageChange(page) {
      this.current = page;
      this.fetchData();
    },

    handleSizeChange(size) {
      this.size = size;
      this.current = 1;
      this.fetchData();
    },
  },
};  
</script>

<style scoped>
/* Add any CSS styles you need for this page here */
</style>